<template>
  <div class="page-container">
    <div class="common-content">
      <div style="padding-top:10px;padding-left:15px;">
        <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
        <div class="search-wrap">
          <el-form
            :inline="true"
            :model="searchFilters"
            :size="searchSize"
            ref="searchFilters"
            label-position="right"
          >
            <el-row class="search-input">
              <!-- 输入框 -->
              <el-form-item label="来源: " prop="applySource">
                <el-select v-model="searchFilters.applySource">
                  <el-option label="H5" value="1"></el-option>
                  <el-option label="PC" value="2"></el-option>
                  <el-option label="Android" value="3"></el-option>
                  <el-option label="IOS" value="4"></el-option>
                  <el-option label="后台" value="5"></el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row class="search-button">
              <el-button-group>
              <el-button type="primary" size="small" @click="queryData('searchFilters')">查询</el-button>
              <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
              <el-button type="primary" size="small" @click="add()">新增申请单</el-button>
            </el-button-group>
            </el-row>
            <el-form-item class="t_r w100">
              <el-button-group>
              <el-tooltip content="刷新" placement="top">
                <el-button size="small" icon="fa fa-refresh" @click="findPage(null)"></el-button>
              </el-tooltip>
              <el-tooltip content="列显示" placement="top">
                <el-button size="small" icon="fa fa-filter" @click="tabulate"></el-button>
              </el-tooltip>
              <el-tooltip content="导出" placement="top">
                <el-button size="small" icon="fa fa-file-excel-o" @click="downloadExcel"></el-button>
              </el-tooltip>
            </el-button-group>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 表格数据部分 -->
      <div class="table-wrap">
        <jic-table
          :height="350"
          :operationWidth="400"
          :tableList="tableList"
          :tableHeaderList="tableHeaderList"
          :totalSize="totalSize"
          :showEditOperation="false"
          :showDeleteOperation="false"
          :showDetailOperation="false"
          :showBatchDelete="false"
          :showCustomOperation="true"
          :showIndex="false"
          :showSelection="false"
          :showOperation="true"
          :customLabel="customLabel"
          @handleCustom="handleCustom"
          @findPage="findPage"
          @handleSizeChange="handleSizeChange"
          @handlePageChange="handlePageChange"
          ref="jicTable"
        ></jic-table>
      </div>
      <div class="dialog-wrap">
        <el-dialog
          width="30%"
          title="提现申请"
          :visible.sync="dialogVisible"
          :before-close="handleClose"
        >
          <!-- 自定义页面内容开始 -->
          <el-form
            :model="dataForm"
            ref="dataForm"
            label-width="160px"
            size="small"
            style="text-align:left;"
            :rules="dataFormRules"
          >
            <el-form-item label="申请人手机号: " prop="userMobile">
              <el-input
                type="text"
                size="mini"
                style="width:100%"
                maxlength="11"
                v-model="dataForm.userMobile"
              ></el-input>
            </el-form-item>
            <el-form-item label="申请金额: " prop="applyAmount">
              <el-input type="text" size="mini"  style="width:100%" v-model="dataForm.applyAmount" maxlength="10" oninput="value = value.match(/^\d*(\.?\d{0,2})/g)[0]"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogVisible = false">取 消</el-button>
            <el-button size="small" type="primary" @click="subApply">提 交</el-button>
          </span>
          <!-- 自定义页面内容结束 -->
        </el-dialog>
        <el-dialog
          width="30%"
          title="提现审核"
          :visible.sync="dialogVisibleReview"
          :before-close="handleCloseReview"
        >
          <!-- 自定义页面内容开始 -->
          <el-form
            :model="dataFormReview"
            ref="dataFormReview"
            label-width="160px"
            size="small"
            style="text-align:left;"
            :rules="dataFormRulesReview"
          >
            <el-form-item label="审核状态: " prop="applyStatus">
              <el-select v-model="dataFormReview.applyStatus" style="width:300px">
                <el-option label="审核通过" value="4"></el-option>
                <el-option label="审核拒绝" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="失败原因: " prop="applyFailureReason">
              <el-input
                type="textarea"
                rows="4"
                size="mini"
                style="width:300px"
                v-model="dataFormReview.applyFailureReason"
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogVisibleReview = false">取 消</el-button>
            <el-button size="small" type="primary" @click="subApplyReview">提 交</el-button>
          </span>
          <!-- 自定义页面内容结束 -->
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
// 引入资源
import jicTable from "@/components/jicComponentGallery/jicTable"; // 引入表格组件
export default {
  // 注册组件
  components: {
    jicTable
  },
  data() {
    return {
      customLabel: "审核",
      dataForm: {
        applySource: 5,
        applyType: 1
      },
      dataFormReview: {
        applyStatus: null
      },
      totalSize: 0, // 返回数据总条数
      pageRequest: { pageNum: 1, pageSize: 10 }, // 请求数据的参数
      tableList: [], // 表格列表数据
      searchSize: "mini", // 用于控制该表单域下组件的尺寸   可选值为medium(中等)  small(小号)   mini(最小号) 、
      // 表格表头数据
      tableHeaderList: [
        //   { prop: "id", label: "ID", minWidth: 50 },
        { prop: "applyNo", label: "申请单编号", minWidth: 160 },
        {
          prop: "applySource",
          label: "申请来源",
          minWidth: 120,
          formatter: function(row, column, cellValue, index) {
            if (cellValue == 1) {
              return "H5";
            } else if (cellValue == 2) {
              return "PC";
            } else if (cellValue == 3) {
              return "Android";
            } else if (cellValue == 4) {
              return "IOS";
            } else if (cellValue == 5) {
              return "后台";
            }
          }
        },
        { prop: "applyUserName", label: "收款人", minWidth: 120 },
        { prop: "applyAmount", label: "申请金额", minWidth: 120 },
        { prop: "actualAmount", label: "实际到账金额", minWidth: 120 },
        {
          prop: "applyStatus",
          label: "提现单状态",
          minWidth: 120,
          formatter: function(row, column, cellValue, index) {
            if (cellValue == 1) {
              return "待审核";
            } else if (cellValue == 2) {
              return "审核成功";
            } else if (cellValue == 3) {
              return "审核拒绝";
            } else if (cellValue == 4) {
              return "待打款";
            } else if (cellValue == 5) {
              return "打款中";
            } else if (cellValue == 6) {
              return "打款成功";
            } else if (cellValue == 7) {
              return "打款失败";
            } else if (cellValue == 8) {
              return "申请完成";
            }
          }
        },
        { prop: "applyFailureReason", label: "失败原因", minWidth: 120 },
        { prop: "createTime", label: "申请时间", minWidth: 120 }
      ],
      searchFilters: {
        applySource: null,
        applyStatus: null,
        userName: null,
        payType: null
      },
      dialogVisible: false,
      dialogVisibleReview: false,
      dataFormRules: {
        userMobile: [
          { required: true, message: "请输入用户手机号", trigger: "blur" }
        ],
        applyAmount: [
          { required: true, message: "请输入提现金额", trigger: "blur" }
        ]
      },
      dataFormRulesReview: {
        applyStatus: [
          { required: true, message: "请选择审核状态", trigger: "change" }
        ],
        applyFailureReason: [
          { required: false, message: "请输入失败原因", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    // 请求列表数据
    findPage(pageNum) {
      // 传过滤器的参数
      let this_ = this;
      if (this_.searchFilters == undefined || this_.searchFilters == null) {
        this_.searchFilters = {};
      }
      this_.searchFilters.start = this.pageRequest.pageNum;
      this_.searchFilters.limit = this.pageRequest.pageSize;
      this.utils.request.getApplyPageList(this_.searchFilters, function(res) {
        this_.tableList = res.data.rows;
        this_.totalSize = Number(res.data.total);
      });
    },
    // 查询
    queryData() {
      this.findPage();
    },

    // 重置
    resetForm() {
      if (this.$refs["searchFilters"] != undefined) {
        this.$refs["searchFilters"].resetFields();
      }
      this.findPage();
    },

    // 列表显示
    tabulate() {
      alert("列表显示");
    },

    // 导出数据
    downloadExcel() {
      alert("导出数据");
    },
    // 详情按钮对应的方法
    add(params) {
      // this.dataForm = params.row;
      if (this.$refs["dataForm"] != undefined) {
        this.$refs["dataForm"].resetFields();
      }
      this.dialogVisible = true;
    },

    // 请求条数发生变化
    handleSizeChange(params) {
      console.log(
        params.size,
        "-------------父页面请求条数发生变化------------"
      );
      this.pageRequest.pageSize = params.size;
      this.findPage();
    },

    // 请求页数发生变化
    handlePageChange(params) {
      console.log(
        params.number,
        "-------------父页面请求页数发生变化------------"
      );
      this.pageRequest.pageNum = params.number;
      this.findPage();
    },
    // 关闭弹窗
    handleClose() {
      this.dialogVisible = false;
    },
    handleCloseReview() {
      this.dialogVisibleReview = false;
    },
    subApply() {
      //提交申请
      let that = this;
      const loading = this.$loading({
        lock: true,
        text: "小的正在拼命加载中....",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      that.utils.request.updateApplyInfo(this.dataForm, res => {
        loading.close();
        if (res.code == "0000") {
          that.dialogVisible = false;
          that.$message({ message: "操作成功", type: "success" });
          that.findPage();
        } else {
          that.$message({ message: res.msg, type: "error" });
        }
      });
    },
    handleCustom(data) {
      console.log(data.row);
      if (Number(data.row.applyStatus) != 1) {
        this.$message({ message: "当前状态不可审核", type: "error" });
        return false;
      }
      if (this.$refs["dataFormReview"] != undefined) {
        this.$refs["dataFormReview"].resetFields();
      }
      this.dataFormReview.id = data.row.id;
      this.dialogVisibleReview = true;
    },
    subApplyReview() {
      this.$refs["dataFormReview"].validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "小的正在拼命加载中....",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          let that = this;
          this.utils.request.reviewApplyInfo(this.dataFormReview, res => {
            loading.close();
            if (res.code == "0000") {
              that.dialogVisibleReview = false;
              that.$message({ message: "操作成功", type: "success" });
              that.findPage();
            } else {
              that.$message({ message: res.msg, type: "error" });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  },
  watch: {
    "dataFormReview.applyStatus": {
      handler(now, oldVal) {
        console.log(now);
        this.dataFormReview.applyStatus == "4"
          ? (this.dataFormRulesReview.applyFailureReason[0].required = false)
          : (this.dataFormRulesReview.applyFailureReason[0].required = true);
      },
      deep: true
    }
  },
  // dom元素绑定后再执行初始化数据操作
  mounted() {
    // 初始化请求数据
    this.findPage();
  }
};
</script>
<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
  box-sizing: border-box;
  .search-wrap /deep/ {
    .el-form-item__label {
      height: 32px;
      line-height: 32px;
    }
    // .el-form-item__content {
    //   height: 32px;
    //   line-height: 32px;
    //   width: 150px;
    // }
    .el-input--mini .el-input__inner {
      height: 32px;
      line-height: 32px;
    }
    // .el-date-editor.el-input,
    // .el-date-editor.el-input__inner {
    //   width: 150px;
    // }
  }
  /* 多日期样式重置 */
  .el-dater /deep/ .el-form-item__content {
    width: 330px;
  }
  /* 通用工具部分样式 */
  .tool-wrap {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    .left-area {
      float: left;
      width: 50%;
      text-align: left;
      button {
        margin-right: 15px;
        border-radius: 5px;
      }
    }
    .right-area {
      float: right;
      width: 50%;
      text-align: right;
    }
  }
  /* 表格部分样式 */
  .table-wrap {
    width: 100%;
    max-height: 600px;
    margin-top: 20px;
  }
  /* 弹窗样式 */
  .dialog-wrap /deep/ .el-dialog__footer {
    text-align: center !important;
  }
}
</style>

